<template>
	<view class="loading-bj" v-if="flag">
		<image src="../../static/loading.png" class="loading-icon"></image>
		<view class="loading-title">{{title}}</view>
	</view>
</template>

<script>
	export default {
		props:{
			title:{
				type:String,
				default:'数据加载中'
			},
			flag:{
				type:Boolean,
				default:false
			}
		}
	}
</script>

<style scoped>
	.loading-bj{
		backdrop-filter: blur(3px);
		box-sizing: border-box;
		padding-top: 60rpx;
		width: 280rpx;
		height: 280rpx;
		border-radius: 20rpx;
		box-shadow: 0 5rpx 20rpx #666;
		background-color: rgba(60,60,60,.7);
		border: #666 1rpx solid;
		position: fixed;
		top: calc(50vh - 140rpx);
		left: calc(50vw - 140rpx);;
		z-index: 999999;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.loading-icon{
		width: 100rpx;
		height: 100rpx;
		animation: move linear 2s infinite;
	}
	.loading-title{
		font-size: 30rpx;
		color: #4AA0FE;
		width: 100%;
		text-align: center;
	}
	@keyframes move{
		from{transform: rotateZ(0deg);}
		to{transform: rotateZ(-720deg);}
	}
</style>
